<template>
  <!-- 设备抗归属 -->
  <div
    class="page-x"
    style="width: 100%; height: 100%"
  >
    <div
      id="container"
      ref="containerG6"
      class="g6-x"
      style="width: 100%; height: 100%"
    />
    <Dialog4 />
    <Dialog3 v-if="dialogShow3" />
    <Dialog5 v-if="dialogShow5" />
    <Dialog6 v-if="dialogShow6" />
  </div>
</template>

<script>
// 【步骤2】 引入G6
import G6 from "@antv/g6";

import Dialog3 from "@/views/xd/components/dialog/dialog3.vue";
import Dialog5 from "@/views/xd/components/dialog/dialog3-1.vue";
import Dialog6 from "@/views/xd/components/dialog/dialog3-2.vue";
import Dialog4 from "@/views/xd/components/dialog/dialog4.vue";
export default {
  name: "Started",
  components: { Dialog3, Dialog4, Dialog5, Dialog6 },
  data () {
    return {
      dialogShow5: false,
      dialogShow6: false,
      dialogShow4: false,
      dialogShow3: false,
      graph: null,
      // 【步骤3】 准备数据
      graphData: {
        // 点集
        nodes: [
          {
            id: "node1", // String，该节点存在则必须，节点的唯一标识
            x: 100, // Number，可选，节点位置的 x 值
            y: 200, // Number，可选，节点位置的 y 值
          },
          {
            id: "node2", // String，该节点存在则必须，节点的唯一标识
            x: 300, // Number，可选，节点位置的 x 值
            y: 200, // Number，可选，节点位置的 y 值
          },
        ],
        // 边集
        edges: [
          {
            source: "node1", // String，必须，起始点 id
            target: "node2", // String，必须，目标点 id
          },
        ],
      },
    };
  },
  mounted () {
    this.init();
  },
  methods: {
    // 初始化关系图，并渲染数据
    initGraph () {
      // 【步骤4】 创建关系图
      const containerG6 = this.$refs.containerG6; // 获取容器（DOM元素）
      this.graph = new G6.Graph({
        container: containerG6, // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
        width: containerG6.offsetWidth, // Number，必须，图的宽度
        height: containerG6.offsetHeight, // Number，必须，图的高度
      });
      // 【步骤5】 匹配数据源并渲染
      this.graph.data(this.graphData); // 读取 Step 2 中的数据源到图上
      this.graph.render(); // 渲染图
    },
    init () {
      let that = this;
      const container = document.getElementById("container");
      const width = container.scrollWidth;
      const height = container.scrollHeight || 500;
      const graph = new G6.Graph({
        container: "container",
        width,
        height,
        // layout: {
        //   type: 'force',
        //   preventOverlap: true,
        //   linkDistance: 220,
        //   // 禁用整个图的拖动
        //   draggable: false,
        //   // linkDistance: (d) => {
        //   //   if (d.source.id === 'node0') {
        //   //     return 100;
        //   //   }
        //   //   return 30;
        //   // },
        //   // nodeStrength: (d) => {
        //   //   if (d.isLeaf) {
        //   //     return -50;
        //   //   }
        //   //   return -10;
        //   // },
        //   // edgeStrength: (d) => {
        //   //   if (d.source.id === 'node1' || d.source.id === 'node2' || d.source.id === 'node3') {
        //   //     return 0.7;
        //   //   }
        //   //   return 0.1;
        //   // },
        // },
        defaultNode: {
          color: "#5B8FF9",
          labelCfg: {
            style: {
              fill: "#ffffff", // 设置标签文字颜色为白色
              fontSize: 18, // 设置标签文字大小为12
            },
          },
          draggable: false,
        },
        modes: {
          //   default: ['drag-canvas'],
        },
      });
      let num = 800; //位置基准
      const data = {
        nodes: [
          {
            id: "node1",
            label: "受保护设备",
            style: {
              fill: "#fe4545",
              fontSize: 30,
            },
            size: 180,
            x: num * 0.9,
            y: num * 0.5,
          },
          {
            id: "node0",
            label: "国防科技大学",
            size: 130,
            style: {
              fill: "#f59a2d", // 设置字体颜色为白色
            },
            x: num * 0.6,
            y: num * 0.5,
          },
          {
            id: "node2",
            label: "软件学院",
            style: {
              fill: "#91cc75",
              color: "white",
            },
            size: 90,
            x: num * 0.6,
            y: num * 0.3,
          },
          {
            id: "node3",
            label: "指挥学院",
            style: {
              fill: "#58b1da",
            },
            size: 90,
            x: num * 0.6,
            y: num * 0.7,
          },
          {
            id: "node4",
            label: "电子科学学院",
            style: {
              fill: "blue",
            },
            size: 90,
            draggable: false,
            x: num * 0.4,
            y: num * 0.5,
          },
          {
            id: "node5",
            label: "系统工程学院",
            style: {
              fill: "#ff713e",
            },
            size: 90,
            draggable: false,
            x: num * 0.4,
            y: num * 0.7,
          },
          {
            id: "node6",
            label: "中国农业大学",
            size: 130,
            style: {
              fill: "#f59a2d",
            },
            draggable: false,
            x: num * 1.3,
            y: num * 0.5,
          },
          {
            id: "node7",
            label: "合肥工业大学",
            size: 130,
            style: {
              fill: "#f59a2d",
            },
            draggable: false,
            x: num * 1.3,
            y: num * 0.7,
          },
          {
            id: "node8",
            label: "pc",
            style: {
              fill: "#8080ff",
            },
            size: 70,
            draggable: false,
            x: num * 0.4,
            y: num * 0.3,
          },
          {
            id: "node9",
            label: "服务器",
            style: {
              fill: "#8080ff",
            },
            size: 70,
            draggable: false,
            x: num * 0.5,
            y: num * 0.2,
          },
          {
            id: "node10",
            label: "pc",
            style: {
              fill: "#8080ff",
            },
            size: 70,
            draggable: false,
            x: num * 0.6,
            y: num * 0.15,
          },
          {
            id: "node11",
            label: "路由器",
            style: {
              fill: "#8080ff",
            },
            size: 70,
            draggable: false,
            x: num * 0.7,
            y: num * 0.2,
          },
        
          {
            id: "node13",
            label: "服务器",
            style: {
              fill: "#8080ff",
            },
            size: 70,
            draggable: false,
            x: num * 0.8,
            y: num * 0.3,
          },
          {
            id: "node14",
            label: "pc",
            style: {
              fill: "#8080ff",
            },
            size: 70,
            draggable: false,
            x: num * 0.7,
            y: num * 0.9,
          },
          {
            id: "node15",
            label: "服务器",
            style: {
              fill: "#8080ff",
            },
            size: 70,
            draggable: false,
            x: num * 0.5,
            y: num * 0.9,
          },
          {
            id: "node16",
            label: "pc",
            style: {
              fill: "#8080ff",
            },
            size: 70,
            draggable: false,
            x: num * 0.6,
            y: num * 0.9,
          },
        ],
        edges: [
          { source: "node0", target: "node1" },
          { source: "node0", target: "node2" },
          { source: "node0", target: "node3" },
          { source: "node0", target: "node4" },
          { source: "node0", target: "node5" },
          { source: "node1", target: "node6" },
          { source: "node1", target: "node7" },
          { source: "node2", target: "node8" },
          { source: "node2", target: "node9" },
          { source: "node2", target: "node10" },
          { source: "node2", target: "node11" },
        
          { source: "node2", target: "node13" },
          { source: "node3", target: "node14" },
          { source: "node3", target: "node15" },
          { source: "node3", target: "node16" },
        ],
      };
      const nodes = data.nodes;
      graph.data({
        nodes,
        edges: data.edges.map(function (edge, i) {
          edge.id = "edge" + i;
          return Object.assign({}, edge);
        }),
      });
      graph.render();

      graph.on("node:click", function (e) {
        console.log(e);
        // 测试代码，后期可删除
        that.dialogShow3 = false;
        that.dialogShow4 = false;
        that.dialogShow5 = false;
        that.dialogShow6 = false;

        let item = e.item._cfg;
        if (item.model.label == "国防科技大学") {
          console.log("国防科技大学");
          that.dialogShow4 = true;
        } else if (item.model.label == "pc") {
          that.dialogShow3 = true;
        } else if (item.model.label == "路由器") {
          that.dialogShow5 = true;
        } else if (item.model.label == "服务器") {
          that.dialogShow6 = true;
        } else {
          that.dialogShow3 = false;
        }



        // end
      });
      graph.on("node:dragstart", function (e) {
        graph.layout();
        refreshDragedNodePosition(e);
      });
      graph.on("node:drag", function (e) {
        refreshDragedNodePosition(e);
      });
      graph.on("node:dragend", function (e) {
        e.item.get("model").x = null;
        e.item.get("model").y = null;
      });
      graph.setMode("custom");
      if (typeof window !== "undefined")
        window.onresize = () => {
          if (!graph || graph.get("destroyed")) return;
          if (!container || !container.scrollWidth || !container.scrollHeight)
            return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
        };
    },
  },
};

function refreshDragedNodePosition (e) {
  const model = e.item.get("model");
  model.x = e.x;
  model.y = e.y;
}
</script>

<style scoped>
.g6-x {
  width: 800px;
  height: 500px;
  box-sizing: border-box;
}
.zindexModel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>